import {RootState} from '@/models/index';
import React from 'react';
import {useEffect} from 'react';
import {useState} from 'react';
import {AnimatedCircularProgress} from 'react-native-circular-progress';
import {connect, ConnectedProps} from 'react-redux';

const mapStateToProps = ({player}: RootState) => {
  return {
    currentTime: player.currentTime,
    duration: player.duration,
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {}

const Progress: React.FC<IProps> = props => {
  const {children, currentTime, duration} = props;
  const [fill, setFill] = useState(0);
  useEffect(() => {
    if (duration === 0) {
      setFill(0);
    } else {
      setFill((currentTime / duration) * 100);
    }
  }, [currentTime, duration]);
  return (
    <AnimatedCircularProgress
      size={40}
      width={2}
      tintColor="#f86442"
      backgroundColor="#ededed"
      fill={fill}>
      {() => <>{children}</>}
    </AnimatedCircularProgress>
  );
};

export default connector(Progress);
